{layout name="common/layout" /}
<script type="text/javascript" src="_CDN__/assets/js/js/jquery.min.js"></script>
<script type="text/javascript" src="_CDN__/assets/js/js/jquery.Spinner.js"></script>
<style>
  table td ,table th{
    vertical-align: middle!important;
    text-align: center;
  }
</style>
<div class="bj_hui">
  <div class="gouwu_da"><span>购物车</span>
    <p>SHOPPING CART</p>
  </div>
  <div class="bai_s">
    <form id="cart-form" action="{:addon_url('shop/checkout/index')}" method="post" role="form">
      <table class="table table-hover table-condensed table-cart">
        {:token()}
        <thead class="hidden-xs" style="background:#f4f4f4;">
          <tr>
            <th width="1%" class="text-center">
              <div style="width:50px;"><input type="checkbox" class="checkall" id="checkall-top" /></div>
            </th>
            <th style="width:40%;text-align:left;min-width:200px;">
              <div class="row" style="display: flex;align-items: center;height: 30px;">
                <div class="col-sm-4 col-md-2" style="min-width:50px;">
                  全选
                </div>
                <div class="col-sm-8 col-md-10 text-left">
                  商品
                </div>
              </div>
            </th>
            <th style="width:10%">单价</th>
            <th width="15%">
              <div style="min-width:100px">数量</div>
            </th>
            <th style="width:15%">小计</th>
            <th width="10%">
              <div style="min-width:80px;">操作</div>
            </th>
          </tr>
        </thead>
        <tbody>

          {foreach name="cartList" id="item"}
          <tr data-id="{$item.id}" data-goods-id="{$item.goods_id}" data-sku-id="{$item.goods_sku_id}"
            data-price="{:$item.sku.price??$item.goods.price}">
            <td align="center" valign="middle" class="optionTd">
              <input type="checkbox" name="ids[]" value="{$item.id}" />
            </td>
            <td data-th="Product" class="text-left">
              <div class="row" style="display: flex;align-items: center;">
                <div style="padding:20px 0px;" class="col-xs-3 col-sm-4 col-md-2">
                  <a href="{$item.goods.url}"><img
                      src="{:cdnurl($item.sku.image ? $item.sku.image : $item.goods.image)}" class="img-responsive"
                      style="width:64px;" /></a>
                </div>
                <div class="col-xs-9 col-sm-8 col-md-10 text-left">
                  <div class="my-1"><a href="{$item.goods.url}" target="_blank">{$item.goods.title}</a></div>
                  <div class="text-muted small">{$item.sku_attr}</div>{:$item.sku.price??$item.goods.price}
                  <div class="text-danger visible-xs">￥</div>
                </div>
              </div>
            </td>
            <td data-th="Price" class="hidden-xs">￥{:$item.sku.price??$item.goods.price}</td>
            <td data-th="Quantity">
              <div class="quantity m-0">
                <div class="quantity-down">-</div>
                <input type="text" class="quantity-text" step="1" min="1" max="" name="quantity" value="{$item.nums}"
                  title="数量" size="4" inputmode="numeric">
                <div class="quantity-up">+</div>
              </div>
            </td>
            <td data-th="Subtotal" class="text-center text-danger hidden-xs">￥<span
                class="cart-item-subtotal">{$item.subtotal}</span></td>
            <td class="actions">
              <button type="button" class="btn btn-sm btn-link btn-delete" data-id="{$item.id}"><i
                  class="fa fa-trash-o fa-2x"></i></button>
            </td>
          </tr>
          {/foreach}
          {if !$cartList}
          <tr>
            <td colspan="6">
              <div class="text-center">购物车暂无任何商品</div>
            </td>
          </tr>
          {/if}
        </tbody>
        {if $cartList}
        <tfoot>
          <tr>
            <td class="text-center"><input type="checkbox" class="checkall" id="checkall-bottom" /></td>
            <td>
              <div class="row">
                <div class="col-sm-2 hidden-xs">
                  <label for="checkall-bottom">全选</label>
                </div>
                <div class="col-sm-10 text-left">
                  已选 <span class="text-danger cart-selected-nums">0</span> 件 <a href="javascript:"
                    class="btn-delete-selected ml-3">删除选中</a>
                </div>
              </div>
            </td>
            <td colspan="4" class="text-right py-4">
              <span class="mr-4 text-danger totalamount">
                <span style="color: #777777;">总计 ￥</span>
                <span class="cart-selected-amount">0.00</span>
                <span class="text-muted ml-2">(不含邮费)</span>
              </span>
              <a href="{shop:config name='shop.indexurl'}" class="btn btn-warning btn-lg">继续购物</a>
              <button type="submit" class="btn btn-success btn-lg btn-checkout">去结算</button>
            </td>
          </tr>
        </tfoot>
        {/if}
      </table>
    </form>
  </div>
</div>


<script type="text/javascript">
  $(function () {
    $(".bai_svs_2").each((index, item) => {
      const aSpan = $(item).find("#a")
      aSpan.Spinner({ value: 1, min: 1, len: 3, max: 1000 });
      const inp = $(item).find(".Amount")
      inp.attr("name", "quantity[]")
    })

    $("#b").Spinner({ value: 99 });

    $("#c").Spinner({ value: 66 });

    $("#d").Spinner();

  });
</script>

<script data-render="script" src="__ADDON__/js/cart.js?v={$site.version}"></script>